<template>
  <div class="forest-management-view">
    <el-container class="p-5 bg-white relative">
      <div class="flex-1 flex flex-col">
        <div class="forest-header flex items-center justify-between p-4 pl-0 gap-5">
          <div class="flex-col justify-between w-96 pl-5">
            <div class="text-2xl">
              简单 <span class="text-4xl font-bold text-[#2B6E50]">3</span> 步
            </div>
            <span class="text-xl">最佳方案轻松导出</span>
          </div>
          <div class="flex items-center gap-10 flex-1">
            <div
              class="one p-5 flex-1 rounded-xl overflow-hidden flex items-center justify-between pr-10 relative"
            >
              <div class="text-white">
                <div class="text-xl font-bold flex gap-2">
                  1、数据管理
                  <div class="round" />
                </div>
                <div class="text-base opacity-60">轻松方案</div>
              </div>
              <div class="box" />
              <img src="@/assets/images/one.png" />
            </div>
            <div
              class="two p-5 flex-1 rounded-xl overflow-hidden flex items-center justify-between pr-10 relative"
            >
              <div class="text-white">
                <div class="text-xl font-bold flex gap-2">
                  2、智能决策
                  <div class="round" />
                </div>
                <div class="text-base opacity-60">轻松方案</div>
              </div>
              <div class="box" />
              <img src="@/assets/images/two.png" />
            </div>
            <div
              class="three p-5 flex-1 rounded-xl overflow-hidden flex items-center justify-between pr-10 relative"
            >
              <div class="text-white">
                <div class="text-xl font-bold flex gap-2">
                  3、方案可视化
                  <div class="round" />
                </div>
                <div class="text-base opacity-60">轻松方案</div>
              </div>
              <div class="box" />
              <img src="@/assets/images/three.png" />
            </div>
          </div>
        </div>
        <!-- 数据管理 -->
        <div v-show="currentStep === 1" class="flex gap-5 min-h-[600px] pt-4">
          <div class="w-96 flex-shrink-0">
            <Left />
          </div>
          <div class="flex-1 min-w-0 max-w-full w-full overflow-hidden">
            <UploadCon v-model:file-id="fileId" />
          </div>
          <div class="w-96 flex-shrink-0">
            <RightChartCon />
          </div>
        </div>

        <!-- 智能决策 -->
        <div v-show="currentStep === 2">
          <decisionMaking v-model:vis-data="visData" v-model:active-plan="activePlan" v-model:plan-making="planMaking" v-model:conversation-id="conversationId" :file-id="fileId" />
        </div>

        <!-- 方案可视化 -->
        <div v-show="currentStep === 3">
          <Visualization ref="visRef" />
        </div>
      </div>

      <div class="flex justify-center gap-4 fixed bottom-6 left-96 right-64 z-50">
        <el-button
          type="primary"
          size="large"
          class="w-[160px] text-white !bg-[#2B6E50] opacity-40 hover:opacity-100 transition-opacity duration-300"
          :class="[currentStep === 1 ? 'opacity-25' : '']"
          :disabled="currentStep === 1"
          @click="prevStep"
        >
          上一步
        </el-button>
        <el-button
          type="primary"
          size="large"
          class="w-[160px] text-white !bg-[#2B6E50] !border-none opacity-40 hover:opacity-100 transition-opacity duration-300"
          :class="[currentStep === 3 ? 'opacity-25' : '']"
          :disabled="currentStep === 3"
          @click="nexStep"
        >
          下一步
        </el-button>
      </div>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Left from './components/Left.vue'
import RightChartCon from '@/views/forest-management/components/right-chart-con/index.vue'
import UploadCon from '@/views/forest-management/components/upload-con/index.vue'
import DecisionMaking from './components/decisionMaking/index.vue'
import Visualization from './components/visualization/index.vue'
import { ElMessage } from 'element-plus'

const currentStep = ref(1)
const fileId = ref('')

const visRef = ref<any>()
const visData = ref<any>({ a: 1 })
const activePlan = ref<any>('')
const planMaking = ref<any[]>([])
const conversationId = ref('')

//点击上一步
const prevStep = () => {
  if (currentStep.value > 1) {
    currentStep.value--
  }
}

//下一步
const nexStep = () => {
  if (!fileId.value) {
    ElMessage.warning('请先上传文件')
    return
  }
  if(currentStep.value === 2) {
    if(!activePlan.value) {
      ElMessage.warning('请先选择方案')
      return
    }
    if(!planMaking.value.length) {
      ElMessage.warning('方案生成中，请稍后')
      return
    }
  }
  if (currentStep.value < 3) {
    currentStep.value++
    if(currentStep.value === 3) {
      visRef.value.getEchartData(conversationId.value, activePlan.value, planMaking.value)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-header {
  height: auto;
}

.forest-header {
  box-shadow: 0px 0px 4px 0px rgba(51, 83, 69, 0.15);
  background: conic-gradient(from 90deg at 50% 0%, #ffffff 0%, #ffffff 100%);

  .round {
    width: 16px;
    height: 16px;
    border-radius: 16px;
  }

  .box {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    position: absolute;
    right: -50px;
    top: -10px;
  }
}

.one {
  background: conic-gradient(
    from 78.26064883702276deg at 29.219359159469604% 0%,
    #60ae8e 0%,
    #3f8e6e 100%
  );

  .round {
    background: conic-gradient(from 90deg at 50% 0%, #71b69a 0%, #419070 100%);
  }
}

.two {
  background: conic-gradient(
    from 78.26064883702276deg at 29.219359159469604% 0%,
    #8686e1 0%,
    #7070da 100%
  );

  .round {
    background: conic-gradient(from 90deg at 50% 0%, #9898e5 0%, #7070da 100%);
  }
}

.three {
  background: conic-gradient(
    from 78.26064929612704deg at 29.219359159469604% 0%,
    #fcc67a 0%,
    #eaa444 100%
  );

  .round {
    background: conic-gradient(from 90deg at 50% 0%, #facd8f 0%, #eaa444 100%);
  }
}
</style>
